<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title></title>
    <link href="css/test3.css" rel="stylesheet" type="text/css" >
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.luara.0.0.1.min.js"></script>
</head>
<body>
<header style="padding-bottom: 5px;">
    <img src="images/top_back.png" style="float: left; width: 1.7rem;height: 1.7rem;">
    <img id="cat" class="btn" src="images/top_category.png" style="float: right; width: 1.7rem;height: 1.7rem;">
    <div class="top_select" >
        <input type="text" placeholder="搜索景点" style="color: #8b8385 ;font-size:0.8rem;width: 100% ; height: 1.7rem; border: none; border-radius: 1rem;
     background-color: #CCCCCC; background-image: url(images/search.png); background-repeat: no-repeat; padding-left: 30px; "/>
    </div>

</header>
<div style="position: relative;">
    <div class="popup">
        <ul>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
        </ul>
    </div>
</div>
<div class="top_image">
    <ul>
        <li><img src="images/ban_1.jpg" alt="1" style="width: 100%"/></li>
        <li><img src="images/ban_2.jpg" alt="2" style="width: 100%"/></li>
        <li><img src="images/ban_3.jpg" alt="3" style="width: 100%"/></li>
        <li><img src="images/ban_4.jpg" alt="4" style="width: 100%"/></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
<script>
    $(function(){
        <!--调用Luara示例-->
        $(".top_image").luara({width:"100%",interval:5000,selected:"seleted"});
    });
</script>
<div class="top_bot">
    <div class="top_bot_left" style="font-size:1rem">
        <span ><img src="images/jd_arr2.png" style="width: 1.5rem"></span>
        <span >热门景点</span>
    </div>
    <div class="top_bot_right" style="font-size:1rem">
        <span ><img src="images/jd_arr2.png" style="width: 1.5rem"></span>
        <span >我身边</span>
    </div>
</div>
<div style="background-color: #CCCCCC; height:1rem; margin-top: 2.3rem;">
    <hr style="color: #8b8385"/>
</div>
<div class="context">
    <div class="context_top">
        <span id="area" class="btn" style="width: 30%;">位置区域<img src="images/channelBg.png" style="width: 0.8rem;"></span>
        |
        <span id="recom" class="btn" style="width: 27%;">达人推荐<img src="images/channelBg.png" style="width: 0.8rem;"></span>
        |
        <span id="theme" class="btn" style="width: 27%;">全部主题<img src="images/channelBg.png" style="width: 0.8rem;"></span>
    </div>
    <div style="position: relative;">
        <div class="popup">
            <ul>
                <li>浙江</li>
                <li>福建</li>
                <li>广东</li>
                <li>北京</li>
                <li>全部主题</li>
            </ul>
        </div>
    </div>
    <div style="position: relative;">
        <div class="popup">
            <ul>
                <li>温州</li>
                <li>宁波</li>
                <li>全部主题</li>
                <li>全部主题</li>
                <li>全部主题</li>
            </ul>
        </div>
    </div>
    <div style="position: relative;">
        <div class="popup">
            <ul>
                <li>全部主题</li>
                <li>全部主题</li>
                <li>全部主题</li>
                <li>全部主题</li>
                <li>全部主题</li>
            </ul>
        </div>
    </div>
    <div class="context_list">
        <div class="list">
            <div class="list_left">
                <img src="images/jd_pic.jpg" style="width: 7rem">
            </div>
            <div class="list_right">
                <div class="list_1">洞头望海楼景区</div>
                <div class="list_2"><img src="images/arr_order01.png" style="height: 0.7rem"><img src="images/arr_order02.png" style="height: 0.7rem; margin-left: 0.2rem">
                    <span style="color: rgba(125, 125, 125, 0.31);float: right; font-size: 0.7rem;">起</span><span style="color: #ff6201; float: right; font-size: 1.1rem ">￥100</span>
                </div>
                <div class="list_3">风景名胜<strike style="float: right;color: rgba(125, 125, 125, 0.31)">￥240</strike></div>
                <div class="list_4">已售2000</div>
            </div>
        </div>
        <hr style="margin: 0.8rem 0 0.8rem 0 ;border-color: rgba(185, 185, 185, 0.31)"/>
        <div class="list">
            <div class="list_left">
                <img src="images/jd_pic.jpg" style="width: 7rem">
            </div>
            <div class="list_right">
                <div class="list_1">洞头望海楼景区</div>
                <div class="list_2"><img src="images/arr_order01.png" style="height: 0.7rem"><img src="images/arr_order02.png" style="height: 0.7rem; margin-left: 0.2rem">
                    <span style="color: rgba(125, 125, 125, 0.31);float: right; font-size: 0.7rem;">起</span><span style="color: #ff6201; float: right; font-size: 1.1rem ">￥100</span>
                </div>
                <div class="list_3">风景名胜<strike style="float: right;color: rgba(125, 125, 125, 0.31)">￥240</strike></div>
                <div class="list_4">已售2000</div>
            </div>
        </div>
        <hr style="margin: 0.8rem 0 0.8rem 0; border-color: rgba(185, 185, 185, 0.31)"/>
        <div class="list">
            <div class="list_left">
                <img src="images/jd_pic.jpg" style="width: 7rem">
            </div>
            <div class="list_right">
                <div class="list_1">洞头望海楼景区</div>
                <div class="list_2"><img src="images/arr_order01.png" style="height: 0.7rem"><img src="images/arr_order02.png" style="height: 0.7rem; margin-left: 0.2rem">
                    <span style="color: rgba(125, 125, 125, 0.31);float: right; font-size: 0.7rem;">起</span><span style="color: #ff6201; float: right; font-size: 1.1rem ">￥100</span>
                </div>
                <div class="list_3">风景名胜<strike style="float: right;color: rgba(125, 125, 125, 0.31)">￥240</strike></div>
                <div class="list_4">已售2000</div>
            </div>
            <hr style="margin: 0.8rem 0 0.8rem 0; border-color: rgba(185, 185, 185, 0.31)"/>
            <div id="more" style="margin: 1rem 0 1rem 0; text-align: center;">点击查看</div>
        </div>
    </div>
</div>
<footer style=" width: 100%; clear:both; position: fixed; bottom:0px;">
    <div align="center" class="home">
        <img src="images/bottom_home.png" style="height: 2rem">
        <div style="text-align: center">首页</div>
    </div>
    <div align="center" class="find">
        <img src="images/bottom_find.png"style="height: 2rem">
        <div style="text-align: center">发现</div>
    </div>
    <div align="center" class="car">
        <img src="images/bottom_shop.png"style="height: 2rem">
        <div style="text-align: center">购物车</div>
    </div>
    <div align="center" class="mine">
        <img src="images/bottom_mine.png"style="height: 2rem">
        <div style="text-align: center">我的</div>
    </div>
</footer>
<div id="shadow" style="display: none;"></div>
<script language="JavaScript" type="text/JavaScript">

    //    var node=$("#cat")[0];//document.getElementById("cat");
    //    var area=$("#area")[0];//document.getElementById("area");
    var p=$(".popup")[0];//document.getElementsByClassName("popup")[1];
    var shadow=$("#shadow")[0];//document.getElementById("shadow");

    //    $(".btn").click(
    //            function(){
    //                var i=$(".btn").index(this);
    //                if($(".popup").eq(i).css("display")=='none'){
    //                    $(".popup").eq(i).css("display","block");
    //                    var top=$(".popup").eq(i).offset();
    //                    $("#shadow").css("top",top.top+"px");
    //                    $("#shadow").css("display","block");
    //                }else{
    //                    $(".popup").eq(i).css("display","none");
    //                    $("#shadow").css("display","none");
    //
    //                }
    //            }
    //    );

    $(function(){
        $(".btn").click(function(){
            var i=$(".btn").index(this);
            if($(".popup").eq(i).css("display")=='none'){
                $(".popup").hide();
                $(".popup").eq(i).show();
                var top=$(".popup").eq(i).offset();
                $("#shadow").css("top",top.top+"px");
                $("#shadow").css("display","block");
            }else{
                $(".popup").eq(i).hide();
                $("#shadow").css("display","none");

            }
        })
    });

    //    var clicked=function(){
    //        if(p.style.display="none"){
    //            p.style.display="block";
    //            shadow.style.display="block";
    //
    //        }else{
    //            p.style.display="none";
    //            shadow.style.display="none";
    //        }
    //    };
    //    node.addEventListener("click",clicked);

    //    var clicked=function() {
    //        $(".popup")
    //        var temp = getOffsetSum(document.getElementsByClassName(".popup")[1]);
    //        temp.style.display = "block";
    //        var pos = getOffsetSum(temp);
    //        shadow.style.display = "block";
    //        shadow.style.display = pos.left + "px";
    //        shadow.style.display = pos.top + "px";
    //    }

    //    function getOffsetSum(elem) {
    //        var top=0, left=0
    //
    //        while(elem) {
    //            top = top + parseInt(elem.offsetTop)
    //            left = left + parseInt(elem.offsetLeft)
    //            elem = elem.offsetParent
    //        }
    //
    //        return {top: top, left: left}
    //    }

</script>
</body>
</html>